<template>
  <ul class="tw-libmenus" :class="{xcolumn: isColumn}">
    <li class="tw-libmenu-item"
      :class="{xactive: idx === activeIndx}"
      v-for="(item, idx) in data"
      :key="idx"
      @click="handleClick(idx)">
      <h3 class="tw-libmenu-item-name">{{item.name}}</h3>

      <div class="tw-libmenu-item-des">
        <span>{{item.desc}}</span>
        <i v-if="item.trend === 'down'" class="iconfont xdown">&#xe62a;</i>
        <i v-if="item.trend === 'up'" class="iconfont xup">&#xe60b;</i>
      </div>
    </li>
  </ul>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'
import border from '../tw-lib-base/border/mixins'

export default {
  name: 'lib-libmenus-list',

  mixins: [props, style, border],

  props,

  data() {
    return {
      activeIndx: 0
    }
  },

  computed: {
    style () {
      return Object.assign({
        height: this.height,
        itemBg: this.itemBg,
        itemBgHover: this.itemBgHover,
        itemBgImg: this.itemBgImg,
        itemBgImgHover: this.itemBgImgHover,
        itemPadding: this.itemPadding,
        nameFontSize: this.nameFontSize,
        nameFontColor: this.nameFontColor,
        desFontSize: this.desFontSize,
        desFontColor: this.desFontColor,
        fontIconSize: this.fontIconSize,
        upIconColor: this.upIconColor,
        downIconColor: this.downIconColor
      }, this.borderStyle)
    }
  },

  methods: {
    setStyle () {
      let style = `
        ::root > .tw-libmenu-item {
          height: ${this.height};
          background-color: ${this.itemBg};
          border-radius: ${this.borderRadius}px;
        }

        ::root > .tw-libmenu-item .tw-libmenu-item-name {
          font-size: ${this.nameFontSize};
          color: ${this.nameFontColor};
        }

        ::root > .tw-libmenu-item .tw-libmenu-item-des {
          font-size: ${this.desFontSize};
          color: ${this.desFontColor};
        }

        ::root > .tw-libmenu-item .tw-libmenu-item-des > .iconfont {
          font-size: ${this.fontIconSize};
        }

        ::root > .tw-libmenu-item .tw-libmenu-item-des > .iconfont.xdown {
          color: ${this.upIconColor};
        }

        ::root > .tw-libmenu-item .tw-libmenu-item-des > .iconfont.xup {
          color: ${this.downIconColor};
        }
      `

      if (this.itemBgImg && this.itemBgImg[0]) {
        style += `
          ::root > .tw-libmenu-item {
            background-image: url("${this.$twApp.fileBaseUrl}${this.itemBgImg[0].localPath}");
          }
        `
      }

      if (this.itemBgImgHover && this.itemBgImgHover[0]) {
        style += `
          ::root > .tw-libmenu-item:hover,
          ::root > .tw-libmenu-item.xactive {
            background-image: url("${this.$twApp.fileBaseUrl}${this.itemBgImgHover[0].localPath}");
          }
        `
      }

      if (this.hasBorder) {
        style += `
          ::root > .tw-libmenu-item {
            border: ${this.borderSize} ${this.borderType} ${this.borderColor};
        }
        `
      }

      this.addStyle(style)
    },

    handleClick(idx) {
      if (this.activeIndx !== idx) {
        this.activeIndx = idx
        this.$emit('input', this.data[idx].value)
        this.$emit('change', this.data[idx].value)
      }
    },

    setDefault () {
      this.activeIndx = -1
      let idx = ''

      for (let i = 0; i < this.data.length; i++) {
        if (this.data[i].value === this.defaultValue) {
          idx = i
          break
        }
      }

      this.handleClick(idx || 0)
    }
  },

  created () {
    window.aaaa = this
  },

  watch: {
    data: {
      immediate: true,
      handler (val) {
        this.setDefault()
      }
    },

    defaultValue: {
      immediate: true,
      handler (val) {
        this.setDefault()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
